<template>
  <div class="roleadd">
     <header>
      <span>
        <span>角色名称:</span>
        <el-input v-model="role" placeholder="请输入关键字" style="width:200px;margin:0 12px"></el-input>
      </span>
    </header>
    <div class="main">
      <div>
        <p style="margin:12px 0">菜单权限</p>
        <el-tree
            ref="tree"
            :data="menulimits"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="[5]"
            :props="defaultProps"
            @check="getNode"
            >
          </el-tree>
      </div>
      <div>
        <p style="margin:12px 0">操作权限</p>
        <div style="margin: 15px 0;" v-for="(item,index) in oprlimits" :key="index"  >
          <el-checkbox            
            :label="item"     
            v-model="opr"
            >{{oprArr[item].PermissionName}}</el-checkbox>
        </div>
      </div>  
    <p style="clear:both"><el-button type="primary" @click="roleAdd" >保存</el-button></p>
  </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data(){
    return {
      role:'',
      menulimits:[],
      oprlimits:[],
      opr:[],
      oprArr:{},
      menu:[],
      // tree
       defaultProps: {
          children: 'sub',
          label: 'name'
      }
    }
  },
   mounted(){     
    this.initData()
  },
  methods:{    
  // 修改数据格式
  getreme(list){
      let i=1
      let s=1
      let data = [];
      list.forEach((item,s)=> {
         let menu
          let subMenu = {
            key: item.key,
            name: item.menuName,
            path: item.path,
            index:i+"-"+s
          }
          
          let index = data.findIndex(k => k.smenuTitle===item.menuTitle)
          if(index !== -1) { 
            data[index].sub.push(subMenu)
            s++
            return 
          }
          if(item.menuName){
            menu = {
              index: "" + i,
              smenuTitle:item.menuTitle,
              name:item.menuTitle,
              title:item.menuName===""?item.menuTitle:item.menuTitle,
              path:item.menuName===""?item.path:"",
              icon:item.menuIcon,
              sub: [subMenu]
            }
          }else{
            menu = {
            index: "" + i,
            smenuTitle:item.menuTitle,
            name:item.menuTitle,
            title:item.menuName===""?item.menuTitle:item.menuTitle,
            path:item.menuName===""?item.path:"",
            icon:item.menuIcon,
            key:item.key
          }}         
          i++
          data.push(menu)
        })        
      return data
    },

    getNode(data, checked, indeterminate) {
      let nodeArr = checked.checkedNodes.filter(item=>{return item.key})
      this.menu = nodeArr.map(item=>item.key)
    },
 
    
    // 添加账号
    roleAdd(){
      // 非空校验
      if(this.role===''||this.menu.length===0||this.opr.length===0){
       return  this.$message({
          message: '内容不能为空',
          type: 'error'
        });
      }
      // 添加数据
      this.$httpAxios(this.$api.ROLE_ADD({obj:{role:this.role.replace(/\s/ig,''),viewpermissions:"["+this.menu+""+"]",roperm:"["+this.opr+""+"]"}}),res=>{
        if(res.code){
          this.$message({
          message: res.msg,
          type: 'success'
        });
         this.$router.push('/role')
        }
      })
    },
    // 获取动态数据
    initData(){
      this.$httpAxios(this.$api.ROLE_LIMITS(),res=>{
        this.menulimits = this.getreme(Object.keys(res.data.rolelist).map(item=>res.data.rolelist[item]))
        this.oprlimits = Object.keys(res.data.limits)
        this.oprArr = res.data.limits        
      })
    },
  },
})
</script>
<style  scoped>
  .roleadd .main>div{
    float: left;
    width: 40%;
    height: 420px;
    border: 1px solid #ececec;
    box-shadow: 0px 0px 3px 0px #cecece;
    padding: 10px;
    margin: 10px 30px 10px 0;
  }
</style>
